<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 推荐内容分类
const featuredCategories = ref([
  { id: 'popular', name: '热门动物', icon: '🔥', color: '#FF6B6B' },
  { id: 'cute', name: '超萌宠物', icon: '🐶🐱', color: '#FF9EAA' },
  { id: 'wild', name: '野生动物', icon: '🦁🐯', color: '#FFD77C' },
  { id: 'marine', name: '海洋生物', icon: '🐬🐠', color: '#8AC4D0' }
])

// 最新更新
const latestUpdates = ref([
  { id: 1, title: '新发现的珍稀动物栖息地', date: '2024-03-15' },
  { id: 2, title: '宠物饲养指南更新', date: '2024-03-10' },
  { id: 3, title: '动物保护公益活动启动', date: '2024-03-05' }
])

// 快速链接
const quickLinks = ref([
  { id: 1, title: '动物百科', path: '/animals' },
  { id: 2, title: '会员中心', path: '/membership' },
  { id: 3, title: '关于我们', path: '/about' },
  { id: 4, title: '联系方式', path: '/contact' }
])

// 导航到分类
const navigateToCategory = (categoryId) => {
  if (categoryId === 'popular') {
    router.push('/animals/cute')
  } else {
    router.push(`/animals/${categoryId}`)
  }
}
</script>

<template>
  <div class="home-page">
    <!-- 页面头部 -->
    <header class="home-header">
      <div class="header-content">
        <h1>🐾 动物乐园 🐾</h1>
        <p>探索奇妙的动物世界，发现自然之美</p>
        <div class="header-buttons">
          <router-link to="/animals" class="explore-button">
            探索动物世界
          </router-link>
          <router-link to="/login" class="login-button">
            登录 / 注册
          </router-link>
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <!-- 特色分类 -->
      <section class="featured-categories">
        <h2 class="section-title">探索分类</h2>
        <div class="categories-grid">
          <div 
            v-for="category in featuredCategories" 
            :key="category.id"
            class="category-card"
            :style="{ backgroundColor: category.color }"
            @click="navigateToCategory(category.id)"
          >
            <div class="category-icon">{{ category.icon }}</div>
            <h3 class="category-name">{{ category.name }}</h3>
          </div>
        </div>
      </section>

      <!-- 最新更新 -->
      <section class="latest-updates">
        <h2 class="section-title">最新动态</h2>
        <div class="updates-container">
          <div v-for="update in latestUpdates" :key="update.id" class="update-item">
            <div class="update-content">
              <h3>{{ update.title }}</h3>
              <span class="update-date">{{ update.date }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 快速链接 -->
      <section class="quick-links">
        <h2 class="section-title">快速链接</h2>
        <div class="links-container">
          <router-link 
            v-for="link in quickLinks" 
            :key="link.id"
            :to="link.path"
            class="link-item"
          >
            {{ link.title }}
          </router-link>
        </div>
      </section>

      <!-- 会员推广 -->
      <section class="cta-section">
        <div class="cta-content">
          <h2>升级会员，解锁更多精彩内容</h2>
          <p>成为会员即可享受无限制访问、专属内容和优质服务</p>
          <router-link to="/membership" class="cta-button">
            了解会员特权
          </router-link>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="home-footer">
      <div class="footer-container">
        <div class="footer-section">
          <h3>关于我们</h3>
          <p>动物乐园致力于为用户提供丰富的动物知识和有趣的互动体验，促进人们对动物保护的关注。</p>
        </div>
        <div class="footer-section">
          <h3>联系方式</h3>
          <p>邮箱: contact@animalpark.com</p>
          <p>电话: 400-123-4567</p>
        </div>
        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="social-icons">
            <span class="social-icon">📱</span>
            <span class="social-icon">🐦</span>
            <span class="social-icon">📸</span>
            <span class="social-icon">🎥</span>
          </div>
        </div>
      </div>
      <div class="copyright">
        <p>© 2024 动物乐园. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.home-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff5f7;
}

/* 页面头部 */
.home-header {
  background: linear-gradient(135deg, #FF9EAA 0%, #FF4081 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.header-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.header-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.header-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.explore-button, .login-button {
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.explore-button {
  background-color: white;
  color: #FF4081;
}

.explore-button:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
}

.login-button {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.login-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* 主要内容 */
.main-content {
  flex: 1;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.section-title {
  font-size: 1.8rem;
  color: #FF4081;
  margin-bottom: 25px;
  text-align: center;
  font-weight: bold;
}

/* 特色分类 */
.featured-categories {
  margin-bottom: 60px;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.category-card {
  padding: 30px 20px;
  border-radius: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  color: white;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.category-name {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 最新更新 */
.latest-updates {
  margin-bottom: 60px;
}

.updates-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.update-item {
  background-color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.update-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.update-content h3 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 8px;
}

.update-date {
  font-size: 0.9rem;
  color: #999;
}

/* 快速链接 */
.quick-links {
  margin-bottom: 60px;
}

.links-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.link-item {
  background-color: white;
  padding: 15px 20px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: #FF4081;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.link-item:hover {
  background-color: #FF4081;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 64, 129, 0.2);
}

/* 会员推广 */
.cta-section {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  padding: 40px 20px;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 60px;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.cta-content h2 {
  font-size: 2rem;
  color: white;
  margin-bottom: 15px;
}

.cta-content p {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 25px;
  opacity: 0.9;
}

.cta-button {
  background-color: white;
  color: #FFA500;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
}

/* 页脚 */
.home-footer {
  background-color: #333;
  color: white;
  padding: 60px 20px 20px 20px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 30px;
}

.footer-section h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: #FF9EAA;
}

.footer-section p {
  line-height: 1.6;
  opacity: 0.8;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.social-icon {
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: #FF9EAA;
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
  opacity: 0.7;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content h1 {
    font-size: 2.5rem;
  }
  
  .header-content p {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .updates-container,
  .links-container {
    grid-template-columns: 1fr;
  }
  
  .featured-categories,
  .latest-updates,
  .quick-links {
    padding: 0 20px;
  }
  
  .cta-section {
    padding: 40px 20px;
  }
  
  .cta-content h2 {
    font-size: 1.8rem;
  }
  
  .home-footer {
    padding: 40px 20px 20px 20px;
  }
}
</style>
